<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <style>
        .number{
            display: inline-flex;
            border: 1px #ddd solid;
        }
        .number>*{
            border: none;
            text-align: center;
        }
        .number>button{
            padding: 5px 10px;
        }
        .number>input{
            width: 100px;
            outline: none;
        }
        /*去掉数字框上下箭头(谷歌浏览器)*/
        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
        }
        /*去掉数字框上下箭头(火狐浏览器)*/
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>
<body>
<div id="app">
    <number :value="10" ref="a" @my-change="onChange"></number>
    <number :value="20" ref="b" :step="5"></number>

    <button @click="alert($refs.a.value)">a.value的值</button>
</div>
<script>
    Vue.component("number",{
        props: {
            value: Number,
            step: { type: Number, default: 1}
        },
        template:`
            <div class="number">
                <button @click="value-=step">-</button>
                <input type="number" v-model="value">
                <button @click="value+=step">+</button>
            </div>
        `,
        created(){
            console.info(this.$parent.code);
        },
        watch:{
            value(newValue, oldValue){
                // 自定义组件事件
                this.$emit("my-change", newValue);
            }
        }
    })

    var v = new Vue({
        el:"#app",
        data:{
            code: 100
        },
        methods:{
            onChange(newValue){
                alert(newValue);
            }
        }
    })
</script>
</body>
</html>